<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial;/* 优先使用Arial字体，备用无衬线字体 */
            max-width: 600px;  /* 页面内容最大宽度600像素 */
            margin: 0 auto;    /* 上下边距0，左右自动（居中布局）*/
            padding: 20px;     /* 内边距20像素（内容与边框间距）*/
            text-align: center;/* 文本水平居中 */
        }
        .game-container {
            background-color: #bdbdbd;
            border-radius: 20px;   /* 10像素圆角边框（柔和视觉效果） */
            padding: 20px;         /* 容器内部边距（内容与边框间距）*/
            margin-top: 20px;      /* 容器顶部外边距（与上方元素的间距）*/
        }

    </style>
</head>
<body>
    <div class="game-container">
        <h1>猜数字游戏</h1>
    <p>我已经做好了一个1到100之间的数字，你能猜出来吗？</p>
    <br>
    请输入要猜的数字：<input class="guess" type="text" value="0"> <input type="button" value="确定" onclick="guessnum()">
    <br>
    已经猜的次数：<span class="has_guess_num">0</span>
    <br>
    结果：<span class="result"></span>
    <br>
    <input class="rest" type="button" value="重新开始游戏" onclick="rest()">
    </div>
</body>
<script>
    //0到100随机数生成
    let targetNumber = Math.floor(Math.random() * 100) + 1;
    //输入的数字
    let guess_element = document.querySelector(".guess");
    //已经猜的次数
    let has_guess_num_element = document.querySelector(".has_guess_num");
    //猜的结果
    let result_element = document.querySelector(".result");
    function rest(){
        guess_element.value = 0;
        has_guess_num_element.innerHTML=0;
        result_element.innerHTML = ""
    }
    function guessnum(){
        has_guess_num_element.innerHTML= parseInt(has_guess_num_element.innerHTML) +1;
        if(targetNumber<parseInt(guess_element.value)){
            result_element.innerHTML="猜大了"
        }
        else if(targetNumber>parseInt(guess_element.value)){
            result_element.innerHTML="猜小了"
        }
        else{
            result_element.innerHTML="猜对了"
        }
    }
</script>
</html>